@import "./common/vars.scss";
@import "./mixins/mixins.scss";

@include b(input){
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        &::-webkit-scrollbar {
            z-index: 11;
            width: 6px; 
        }
        &::-webkit-scrollbar:horizontal {
            height: 6px; 
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            width: 6px;
            background: #b4bccc;
        }
        &::-webkit-scrollbar-corner {
            background: #fff; 
        }
        &::-webkit-scrollbar-track {
            background: #fff; 
        }
        &::-webkit-scrollbar-track-piece {
            background: #fff;
            width: 6px; 
        }
        @include when(disabled){
          @include e(inner){
              background-color: #f5f7fa;
              border-color: #e4e7ed;
              color: #c0c4cc;
              cursor: not-allowed;
          }        
        }
    @include e(inner){
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%; 

        &::placeholder {
          color: #c0c4cc; 
        }
        &:hover {
          border-color: #c0c4cc; 
        }
        &:focus {
          outline: none;
          border-color: $primary-color; 
        }
    }
}

.vw-input--suffix{
  .vw-input__inner {
      padding-right: 30px;
  }
}

.vw-input--prefix{
  .vw-input__inner {
      padding-left: 30px;
  }
}

.vw-input__suffix{
  position: absolute;
  height: 100%;
  right: 10px;
  top: 0;
  text-align: center;
  color: #c0c4cc;
  transition: all .3s;
  &:hover{
      color: #909399; 
  }
  .vw-input__icon{
     line-height: 40px;
  }
}

.vw-input__prefix{
  position: absolute;
  height: 100%;
  left: 5px;
  top: 0;
  text-align: center;
  color: #c0c4cc;
  transition: all .3s;
  &:hover{
      color: #909399; 
  }
  .vw-input__icon{
     line-height: 40px;
     text-align: center;
     width:25px;
  }
}

@include b(textarea){
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: 14px;
  @include e(inner){
      display: block;
      resize: vertical;
      padding: 5px 15px;
      line-height: 1.5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      font-size: inherit;
      color: #606266;
      background-color: #fff;
      background-image: none;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      &::placeholder {
          color: #c0c4cc; }
      &:focus {
          outline: none;
          border-color: #409EFF;
      }
  }
}